<!--
 * @Author: yangboSam yangbo_sam@foxmail.com
 * @Date: 2023-06-07 15:41:34
 * @LastEditors: yangboSam yangbo_sam@foxmail.com
 * @LastEditTime: 2023-06-07 18:30:52
 * @FilePath: \summarize\html\layui\tableOverScroll.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui-table 滚动条调试</title>
    <!-- <link rel="stylesheet" href="../../style/layui/css/layui.css" media="all"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.4/css/layui.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <style>
        body {
            /* margin: 10px; */

            /* width: 100vw;
            min-width: 1200px;
            overflow-x: hidden; */
            /* overflow-x: hidden; */
        }

        /* .over_scroll {
            width: 100vw;
            min-width: 1200px;
            overflow-y: hidden;
        } */
    </style>
</head>

<body>
    <div class="over_scroll">
        <!-- <h1>占位-----------------------------------------------</h1>
        <h1>占位-----------------------------------------------</h1>
        <h1>占位-----------------------------------------------</h1> -->
        <table id="demo" lay-filter="test"></table>
    </div>

    <!-- <script src="../../style/layui/layui.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.4/layui.js"></script>
    <script>
        $(function () {
            layui.use('table', function () {
                var table = layui.table;

                //第一个实例
                table.render({
                    elem: '#demo',
                    // width: 5000,
                    height: 'full-40', //充满高度 - 40px
                    url: '../../json/layui.table.test.json', //数据接口
                    page: false, //开启分页
                    cols: [
                        [{
                                title: '会议室',
                                field: 'room',
                                rowspan: 2,
                                align: 'center',
                                style: 'height: 95px;font-weight:bold',
                                width: 210
                            },
                            {
                                field: 'period',
                                title: '时间',
                                width: 60,
                                rowspan: 2,
                                align: 'center',
                                style: 'height: 95px;font-weight:bold'
                            },
                            {
                                title: "2023-06-05",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-06",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-07",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-08",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-09",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-10",
                                width: 210,
                                colGroup: true
                            },
                            {
                                title: "2023-06-11",
                                width: 210,
                                colGroup: true
                            },
                        ],
                        [ //表头
                            {
                                field: 'id',
                                title: '星期一',
                                width: 210,
                                // sort: true,
                                // fixed: 'left'
                            }, {
                                field: 'username',
                                title: '星期二',
                                width: 210
                            }, {
                                field: 'sex',
                                title: '星期三',
                                width: 210,
                            }, {
                                field: 'city',
                                title: '星期四',
                                width: 210
                            }, {
                                field: 'sign',
                                title: '星期五',
                                width: 210
                            }, {
                                field: 'experience',
                                title: '星期六',
                                width: 210,
                            }, {
                                field: 'score',
                                title: '星期天',
                                width: 210,
                            },
                        ]
                    ]
                });

            });
        })
    </script>
</body>

</html>